<template>
  <div class="userCenter">
    <el-card shadow="never" class="box-card HeadPortrait">
      <div slot="header" class="clearfix">
        <div class="HeadPortrait-phone">
          <el-avatar
            class="f-l"
            :size="80"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          ></el-avatar>
          <span class="f-l">18368015236</span>
        </div>
      </div>
      <div class="text item fastContent">
        <span>我的车型</span>
        <span>我的收货地址</span>
        <span>我的收藏</span>
        <span>我的车型：小刀电动车</span>
      </div>
    </el-card>

    <el-card shadow="never" class="box-card orderInformation">
      <div slot="header" class="clearfix">我的订单</div>
      <div class="text">
        <el-badge :value="12" class="item">
          <el-button size="small">待付款</el-button>
        </el-badge>

        <el-badge :value="12" class="item">
          <el-button size="small">待收货</el-button>
        </el-badge>

        <el-badge :value="12" class="item">
          <el-button size="small">待安装</el-button>
        </el-badge>

        <el-badge :value="12" class="item">
          <el-button size="small">待评价</el-button>
        </el-badge>
      </div>
    </el-card>

    <el-card shadow="never" class="box-card logistics">
      <div slot="header" class="clearfix">我的物流</div>
      <div class="item">
        <ul>
          <li>
            <img
              src="http://img.alicdn.com/bao/uploaded/i4/2201439592908/O1CN01y6RSWF1XLuJ4GQhnr_!!0-item_pic.jpg_220x220.jpg"
              alt
              class="f-l"
              srcset
            />
            <div class="f-l li-text">
              <span>[深圳市]福田新福星的刘腾飞[17727930454]已揽...</span>
              <span>2019-07-26 12:40:15</span>
            </div>

            <div class="f-r li-operation">
              <el-button class="f-l" size="small">确认收货</el-button>

              <el-popover
                placement="top-start"
                title="中通快递    运单号：75164195009716"
                width="300"
                trigger="hover"
                content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
              >
                <el-table></el-table>
                <el-button slot="reference" class="f-l" size="small">查看物流</el-button>
              </el-popover>
            </div>
          </li>
        </ul>
      </div>
    </el-card>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {};
  },
  methods: {},
  created: function() {
    this.$api.userAPI.getUserOrder().then(response => {
      this.$store.commit("updataOrder", response.data);
    });
  },
  components: {}
};
</script>

<style lang="scss" type="text/css" scoped>
.box-card {
  margin-bottom: 10px;
}
.userCenter {
  .HeadPortrait {
    .HeadPortrait-phone {
      height: 80px;
      line-height: 80px;
      .f-l {
        margin-right: 10px;
      }
    }
    .fastContent {
      span {
        margin-right: 20px;
      }
    }
    .HeadPortrait-Information {
      height: 80px;
      line-height: 80px;
    }
  }

  .orderInformation {
    .item {
      margin-right: 30px;
    }
  }

  .logistics {
    .item {
      li {
        height: 100px;
      }
      img {
        width: 100px;
      }
      .li-text {
        margin-left: 50px;
        height: 100%;
        width: 500px;

        span {
          display: block;
          width: 500px;
          margin-top: 10px;
          font-size: 14px;
        }
      }

      .li-operation {
        width: 100px;
        margin-left: 0px;
        button {
          margin-bottom: 5px;
        }
      }
    }
  }
}
</style>
